@import 'mo/style/common';

#{$split} {
    flex: 1;
    height: 100%;
    position: relative;
    width: 100%;

    &__pane {
        height: 100%;
        overflow: hidden;
        position: absolute;
        white-space: normal;
        width: 100%;
    }

    &__sash {
        height: 100%;
        position: absolute;
        top: 0;
        transition: background-color 0.1s;
        width: 100%;
        z-index: 2;

        &--disabled {
            pointer-events: none;
        }

        &--hover {
            background-color: var(--sash-hoverBorder);
        }

        &--vertical {
            cursor: col-resize;
        }

        &--horizontal {
            cursor: row-resize;
        }
    }

    &--dragging {
        #{$split}__pane {
            user-select: none;
        }

        &#{$split}--vertical {
            cursor: col-resize;
        }

        &#{$split}--horizontal {
            cursor: row-resize;
        }
    }
}
